<template>
    <div class="user-detail-box flex align-items-center justify-content-center height-100-percent">
        <el-card class="box-card">
            <template #header>
                <div class="flex align-items-center space-between">
                    <span>用户信息</span>
                    <el-button class="button" type="primary" :loading="commonData.btnLoading" @click="handleRedirect">
                        发送消息
                    </el-button>
                </div>
            </template>
            <div class="item"><span>用户id</span>：{{userInfo['id']}}</div>
            <div class="item"><span>用户名</span>：{{userInfo['username']}}</div>
            <div class="item"><span>创建时间</span>：{{userInfo['createdAt']}}</div>
        </el-card>
    </div>
</template>

<script setup>
    import {onMounted, watch, reactive} from 'vue';
    import {useRoute, useRouter} from 'vue-router';
    import {useStore} from 'vuex';
    import {api} from '../utils/api';
    import {service} from '../utils/service';

    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    let currentUserId = route.params['userId'];
    let userInfo = reactive({
        id: '--',
        username: '--',
        createdAt: '--'
    });
    const commonData = reactive({
        btnLoading: false
    });

    onMounted(async () => {
        await store.dispatch('handleCurrentUserId', currentUserId || 0);
        getUserDetail();
    });
    watch(() => route.params, async () => {
        currentUserId = route.params['userId'];
        if (currentUserId) {
            await store.dispatch('handleCurrentUserId', currentUserId || 0);
            getUserDetail();
        }
    });
    //获取用户详情
    const getUserDetail = () => {
        commonData.btnLoading = true;
        service.doGet(api['userDetail'], {id: currentUserId})
            .then(async (response) => {
                if (response.code === 1) {
                    const userDetail = response.data.userDetail;
                    userInfo.id = userDetail.id;
                    userInfo.username = userDetail.username;
                    userInfo.createdAt = userDetail.createdAt;
                }
                commonData.btnLoading = false;
            }).catch(() => {
            commonData.btnLoading = false;
        })
    };

    //跳转发送消息页
    const handleRedirect = async () => {
        await router.push(`/index/user-chat-detail/${currentUserId}`);
    }
</script>

<style scoped lang="less">
    .user-detail-box {
        .box-card {
            width: 450px;
            text-align: left;

            .item {
                margin: 10px 0;

                span {
                    width: 80px;
                    display: inline-block;
                }
            }
        }
    }
</style>